<template>
	<div class="car">
		<header>购物车</header>
		<div class="main-car table-responsive">
			<table class="table">
				<tr v-for="item in nowgoods">
					<td class="imgtd"><img :src="item.imgsrc"/></td>
					<td><p>{{item.delp}}</p>
						<p class="psmall">{{item.psmall}}</p>
						<p class="price" ref="price">{{item.price*item.num|filnum(0)}}</p>
					</td>
					<td class="td3">
						<p class="p1"><button class="btn btn-default reduce" :id="item.id"@click="changeNumber(item.id,-1)">-</button >
						<span class="num">{{item.num}}</span>
						<button class="btn btn-default add" :id="item.id" @click="changeNumber(item.id,1)">+</button>
					</p>
					<p class="p2"><button class="btn btn-danger del" @click="del(item.id)">删除</button>
					</p>
					</td>
				</tr>
				<tr class="lasttr">
					<td colspan="3"><span class="lt">总价格:￥{{goodstotal|filnum(0)}}</span><button class="rt btn btn-danger">去结算</button></td>
				</tr>
			</table>
		</div>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	header{
		height: 40px;
		line-height: 40px;
		font-size: 14px;

	}
	.table{
		td{
			font-size: 14px;
			button{
				height: 24px;
				line-height:normal;
				font-size: 14px;
				width: 60px;
				text-align: center;
				outline: none!important;
				padding: 0;
			}
			}
		.imgtd{
			width: 22vw;
			height: 14vh;
			img{
				width: 100%;
				height: 100%;
			}
		}
		p{
			text-align: left;
		}
		.price{
			color: #FF3030;
		}
		.td3{
			p{
				margin: 4px 0;
			}
			input{
				width: 60px;
				height: 24px;
			}
			button{
				outline: none!important;
			}
			.p1{
				button{
					background: transparent;
					border: none;
					outline: none;
					width: 10px;
					font-size: 16px;
					font-weight: 600;
					color: #DBDBDB;
					margin: 0 2px;
					padding: 0 4px;
				}
				span{
					background: #DBDBDB;
					color: #000;
					width: 30px;
					display: inline-block;
					text-align: center;

				}
				.add{
					color: #000;
				}
			}
			.p2{
				text-align: center;
			}
		}
		.lasttr{
			border-bottom:0.5px solid #DBDBDB;
			button{
				margin-right: 7px;
			}
		}
		.psmall{
			color:#008B8B;
			font-size: 13px;
		}
	}
</style>

<script type="text/javascript">
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

import { mapState,mapMutations,mapGetters,mapActions} from 'vuex'
	export default{
		data(){
			return{
				goodsnum:1,
				nowgoods:[],
				goodstotal:0
			}
		},
		components:{
			
		},
		filters:{
			"filnum":function(data,num){
				return data.toFixed(num)
			}
		},
		computed:{
	        // ...mapGetters(
	        //     [ "total","goodsNumber"]
	        // ),   
	         goods(){
	            return this.$store.state.goods
	        }
	    },
		methods:{
        ...mapMutations(
            ["deleteGoods","updateGoods"]
        ),
        findPosition(id){
            return this.goods.findIndex(item=>{
                return item.id==id
             })
        },

        changeNumber(id,val){
            var i=this.findPosition(id);
            var num=this.goods[i].num;
            this.updateGoods({
                  index:i,
                  key:"num",
                  value:num+val<=0?1:num+val
             })
            this.totalall()
        },

        del(id){
             var i=this.findPosition(id);
            this.deleteGoods(i);
            this.totalall()
        },

        toggleSelect(id){
            var i=this.findPosition(id);
             var select=this.goods[i].select;
             this.updateGoods({
                  index:i,
                  key:"select",
                  value:!select
             })            
        },
        totalall(){
        	var that=this;
        	that.goodstotal=0;
        	$(".price").each(function(item,i){
        		that.goodstotal+=parseFloat($(this).text())
        	})
        	if(this.goods.length!=0){
        		this.goodstotal+=parseFloat(this.goods[0].price)
        	} 	
        }
    },
    	mounted(){
			this.nowgoods=this.goods;
			this.totalall()
    	}
	}
</script>